<style rel="styleesheet" lang="less">
@media screen and (min-width: 829px) {
  .workDynamicso {
    * {
      box-sizing: border-box;
    }
    p,p *{
      line-height: inherit !important;
    }
    #infinite{
      display: none;
    }
    background-color: #F6F7FB;
    .left-box {
      padding-right: 50px;
    }
    .content {
      overflow: hidden;
      /*width: 80%;*/
      max-width: 1050px;
      margin: 0 auto;
      /*max-width: 1200px;*/
      padding-bottom: 4.5rem;
      .kind {
        margin-top: 3.5rem;
        margin-bottom: 1rem;
        height: 2.43rem;
        ul {
          position: relative;
        }
        ul li {
          float: left;
          font-size: 1.57rem;
          cursor: pointer;
          margin-right: 3.5rem;
          color: #565656
        }
        ul .active {
          color: #F37D0A;
        }
        ul li:last-child {
          margin-right: 0;
          margin-bottom: 3.5rem;
        }
      }

      /*.search {*/
        /*margin-top: 3.5rem;*/
        /*margin-bottom: 1rem;*/
        /*height: 2.43rem;*/
        /*position: relative;*/
        /*.searchBox {*/
          /*float: right;*/
          /*width: 100%;*/
          /*height: 2.43rem;*/
          /*background: rgba(246,247,251,1);*/
          /*border: 1px solid #CCCCCC;*/
          /*border-radius: 1.14rem;*/
          /*padding-left: 15px;*/
        /*}*/
        /*.searchLogo {*/
          /*font-size: 1rem;*/
          /*cursor: pointer;*/
          /*position: absolute;*/
          /*right: 0.8rem;*/
          /*top: 0.8rem;*/
          /*color: rgba(204,204,204,1);*/
        /*}*/
      /*}*/

      .leftInfo {
        margin-top: 3.5rem;
        clear: both;
      }
      /*.contentUl li {*/
        /*position: relative;*/
        /*width: 100%;*/
        /*margin-bottom: 2rem;*/
        /*cursor: pointer;*/
        /*background-color: #fff;*/
        /*width: 100%*/
      /*}*/
      /*.img-box {*/
        /*width: 21%;*/
        /*!*width: 12.7rem;*!*/
        /*height: 8.57rem;*/
        /*display: inline-flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*vertical-align: middle;*/
        /*!*padding-left: 3.5rem;*!*/
        /*img {*/
          /*max-width: 100%;*/
          /*height:auto;*/
          /*!*padding-left: 1rem;*!*/
          /*!*max-height: 100%*!*/
          /*!*width: 12.79rem;*!*/
          /*!*height: 100%;*!*/
          /*!*margin-right: 3.4rem;*!*/
        /*}*/
      /*}*/
      .contentUl li {
        position: relative;
        width: 100%;
        margin-bottom: 2rem;
        cursor: pointer;
        background-color: #fff;
        height: 8.57rem;
        clear: both;
        overflow: hidden;
      }
      .img-box {
        float: left;
        /*width: 12.7rem;*/
        /*width: 170px;*/
        /*width: 16.1%;*/
        /*width: 180px;*/
        width: 20%;
        overflow: hidden;
        height: 8.57rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        img {
          width: 100%;
          /*height:auto;*/
          height: 100%;
          /*padding-left: 1rem;*/
          /*max-height: 100%*/
          /*width: 12.79rem;*/
          /*height: 100%;*/
          /*margin-right: 3.4rem;*/
        }
      }
      .c-info-box {
        float: right;
        width: 80%;
        height: 8.57rem;
        /*width: 25rem;*/
        /*max-height: 79rem;*/
        display: inline-block;
        vertical-align: top;
        padding: 1rem 1.4rem;
      }
      .c-title {
        margin-top: .5rem;
        font-size: 1.29rem;
        width: 100%;
        
        color:rgba(51,51,51,1);
        line-height:1.43rem;
        height: 1.29rem;
        line-height: 1.29rem;
      }
      .c-notes{
        height: 2.43rem;
        line-height: 1.215rem;
        width: 100%;
        display:-webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: .7rem;
      }
      .c-time {
        margin-top: 1rem;
        color: #ccc;
        width:100%;
        height:0.79rem;
        font-size:0.86rem;
        
        color:rgba(204,204,204,1);
      }
    }
    .timeLine {
      margin-top: 3.57rem;
      padding-left: 5px;
      /*height: 800px;*/
      max-height:68rem;
      color: #CCCCCC;
      font-size: 1rem;
      overflow: auto;
      ul {
        border-left: 1px solid #F5C08D;
        padding: 2rem 0 2rem 10px;
      }
      li {
        margin-bottom: 1.1rem;
      }
      .active {
        color: #666;
        position: relative;
      }
      .active:before {
        content: "\e69b";
        font-family: "iconfont" !important;
        position: absolute;
        top: 0;
        left: -18px;
        font-size: 15px;
        color: #F37D0A;
      }
      .t-l-info {
        margin-top: 8px;
        background-color: #fff;
        padding: 10px;
        cursor: pointer;
      }
    }
    .t-l-carousel {
      display: none
    }
    /*.el-pager>li:hover{*/
      /*color: rgba(243,125,10,1);*/
    /*}*/
    .el-pager>.active{
      border-color: rgba(243,125,10,1);
      background-color:rgba(243,125,10,1);
    }
    #searchCom_mobile,.search-box-mobile{
      display: none;
    }
    #searchCom_pc {
      float: right;
      margin-top: 3.5rem;
      margin-bottom: 1rem;
      height: 2.43rem;
      position: relative;
      .searchBox {
        float: right;
        width: 16.7rem !important;
        height: 2.43rem;
        background: #FBFBFE;
        border: 1px solid #CCCCCC;
        border-radius: 1.14rem;
        padding-left: 15px;
      }
      .searchLogo{
        font-size: 1rem;
        cursor: pointer;
        position: absolute;
        right: 0.8rem;
        top: 0.8rem;
        color: #CCCCCC;
      }
    }
  }
}

@media screen and (max-width: 829px) {
  .workDynamicso {
    background-color: #F6F7FB;
    overflow: hidden;
    #infinite{
      display: block;
    }
    * {
      box-sizing: border-box;
    }
    p,p *{
      line-height: inherit !important;
    }
    .kind {
      font-size: 0.28rem;
      background-color: #FFFFFF;
      padding-left: 0.3rem;
      margin-bottom: 0.16rem;
      font-weight: bold;
      width: 83% !important;
      li {
        display: inline-block;
        margin-right: 0.5rem;
        color: #3E3A39;
        line-height: 1.05rem;
      }
      li:last-child {
        margin-right: 0
      }
      li.active {
        color: #FD9D40;
      }
    }
    .search {
      background-color: #FFFFFF;
      height: 1.05rem;
      line-height: 1.05rem;
      text-align: center;
      width: 17% !important;
      .searchBox {
        display: none
      }
      .icon-search {
        font-size: 0.5rem;
      }
    }
    .img-box {
      width: 2.57rem;
      height: 1.57rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      img {
        display: block;
        max-width: 2.57rem;
        max-height: 1.57rem;
      }
    }
    .c-info-box {
      display: inline-block;
      width: 4.2rem;
      vertical-align: top;
      height:1.57rem;
      overflow: hidden;
      display:-webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      float: right;
      padding-right: .4rem;
    }
    .c-notes {
      color: #888;
      font-size: 0.26rem;
    }
    .contentUl {
      li {
        background-color: #fff;
        padding: 0 0.3rem;
        margin-bottom: 0.16rem;
        position: relative;
        padding-top: 1rem;
      }
    }
    .c-title {
      position: absolute;
      width: 100%;
      color: #1a1a1a;
      top: 0.32rem;
      left: 0.3rem;
      font-size: 0.32rem;
      padding-right: .5rem;
    }
    .t-l-carousel {
      height: 2.47rem;
    }
    .t-l-box {
      padding: 0.4rem 0;
      font-size: 0.22rem;
      color: #3E3A39;
      height: 100%;
      background-color: #fff;
      position: relative;
    }
    .left-icon,
    .right-icon {
      position: absolute;
      font-size: 0.3rem;
      bottom: -0.15rem;
      color: #FD9D40;
    }
    .left-icon {
      left: 0.3rem;
    }
    .right-icon {
      left: 60%;
    }
    .t-l-box:after {
      content: ' ';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 30%;
      height: 100%;
      background-image: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
    }
    .t-l-c-top {
      border-bottom: solid 1px #F2A15A;
      padding: 0 0.4rem;
      padding-bottom: 0.26rem;
      max-height: 0.9rem;
      position: relative;
    }
    .t-l-c-down {
      padding: 0 0.4rem;
      padding-top: 0.26rem;
      max-height: 0.9rem;
      .t-l-c-l {
        vertical-align: top;
      }
    }
    .t-l-c-l,
    .t-l-c-r {
      display: inline-block;
      max-height: 0.55rem;
      overflow: hidden;
    }
    .t-l-c-l {
      width: 65%;
    }
    .t-l-c-r {
      width: 34%;
    }
    .left-box {
      width: 100%
    }
    .c-time,
    .pageWrap,
    .timeLine {
      display: none
    }
    #searchCom_pc{
      display: none;
    }
    #searchCom_mobile{
      float: right;
      background-color: #FFFFFF;
      height: 1.05rem;
      line-height: 1.05rem;
      text-align: center;
      width: 17%;
      position: relative;
    }
    .search-box-mobile{
      transform: translateX(-825px);
      transition:all .3s linear;
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      height: 1.05rem;
      border-radius: 2px;
      background-color: #fff;
      input{
        width: 80%;
        display: inline-block;
        border-radius: 33px;
        height: 80%;
        margin-top: 1%;
        padding-left: 15px;
        font-size: .3rem;
        border: 1px solid #e2e2e5;
      }
    }

    .showTranslate{
      transform: translateX(0px);
    }
    .reduction,.sure{
      display: inline-block;
      width: 10%;
      height: 100%;
      text-align: center;
      font-size: 0.25rem;
      line-height: 1.05rem;
    }
    .reduction{
      float: left;
    }
    .sure{
      float: right;
    }
    .ing {
      background-color: #1DBDFD;
    }
    .over {
      background-color: #1a1a1a;
    }
  }
}
</style>
<template>
  <div class="workDynamicso">
    <div class="content">
      <el-row>
        <el-col :xs="24" :sm="18" :md="18" :lg="18" class="left-box">
          <div style="overflow:hidden;width:100%">
            <el-col :xs="20" :sm="18" :md="16" :lg="16" class="kind">
              <ul>
                <li :class="{'active':1==num}" @click="active(1)">全部</li>
                <li :class="{'active':2==num}" @click="active(2)">书院动态</li>
                <li :class="{'active':3==num}" @click="active(3)">工作动态</li>
                <li :class="{'active':4==num}" @click="active(4)">培训新闻</li>
              </ul>
            </el-col>


            <div id="searchCom_pc" class="search show-search">
              <div class="search-box">
                <input type="text" v-model="searchData" class="searchBox" @keyup.enter="searchFun">
                <span class="icon-search searchLogo" @click="searchFun"></span>
              </div>
            </div>

            <div id="searchCom_mobile">
              <span class="icon-search searchLogo" @click="openSearchBox"></span>
            </div>
            <div class="search-box-mobile"  :class="{'showTranslate':showSearch}">
              <div class="reduction" @click='closeSearchBox'><span class="icon-return return"></span></div>
              <input type="text" v-model="searchData" class="searchBox" @keyup.enter="searchFun">
              <div class="sure" @click="searchFun"><span class="icon-search search"></span></div>
            </div>
          </div>

          <div class="leftInfo">
            <ul class="contentUl">
              <li @click="goActive(item.contentId)" v-for="(item, key) in newsList" :key="'asdfasdf'+requestData.PageIndex+'_'+key" >
                <div class="img-box">
                  <img v-lazy="item.showImageUrl">
                </div>
                <div class="c-info-box">
                  <div class="c-title bw-nowrap">{{item.title}} </div>
                  <div class="c-notes" v-html="formatNotes(item.abstract.split('</p>')[0])"></div>
                  <div class="c-time">发布时间：{{$bw.format(item.postTime,'date')}}</div>
                </div>
              </li>
              <li v-show="newsList.length==0" style="background-color: #f6f7fb">
                <span style="color: #CCCCCC">无更多数据展示</span>
              </li>
            </ul>

            <!--mobile端下拉刷新-->
            <!--当分页插件不一致时 需要分别css的display-->
            <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" id="infinite">
            </infinite-loading>

            <el-col :xs="24" :sm="24" :md="8" :lg="8" :offset="8" class="pageWrap">
              <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="PageSize" layout="prev, pager, next, jumper" :total="PageTotal">
                </el-pagination>
              </div>
            </el-col>

          </div>
        </el-col>

        <el-col :xs="24" :sm="6" :md="6" :lg="6" class="timeLine">
          <ul>
            <li v-for="(item,key) in timeLineList" :class="[item.data.length>0?'active':'']">
              <div class="t-l-time">{{item.time}}</div>
              <div class="t-l-info" v-for="(arr,k) in item.data" @click="goActive(arr.id)">{{arr.title}}</div>
            </li>
          </ul>
        </el-col>

      </el-row>
      <swipe class="t-l-carousel" :auto="0" :showIndicators="false" :continuous="false">
        <swipe-item v-for="(item, key) in timeLineList" :key="key">
          <div class="t-l-box">
            <div class="t-l-c-top">
              <div class="t-l-c-l"   v-for="(arr,k) in item.data"  @click="goActive(arr.id)">{{arr.title}}</div>
              <div class="t-l-c-r">{{getNext(timeLineList,key).time}}</div>
              <i class="icon-spot left-icon"></i>
              <i class="icon-spot right-icon"></i>
            </div>
          </div>
        </swipe-item>
      </swipe>
    </div>
  </div>
</template>
<script>
  import InfiniteLoading from 'vue-infinite-loading';
export default {
  data() {
    return {
      showSearch:false,
      num: 1,
      currentPage3: 1,
      PageSize: 6,
      PageIndex:0,
      PageTotal: 1,
      searchData: '',
      newsList: [],
      timeLineList: [],
      timeLineCList: [],
      busy:false,
      requestData: {
        "Filter": [{
          "GroupName": "1",
          "FieldName": "PlatformType",
          "FieldValue": 0,
          "SqlOperator": 3,
          "IsQuery": true
        },
        {
          "GroupName": "2",
          "FieldName": "categoryType",
          "FieldValue": "News",
          "SqlOperator": 3,
          "IsQuery": true
        }
        ],
        PageIndex: 1,
        PageSize: 6,
        Sort:{
          "PostTime":1
        }
      }
    }
  },
  components: {
    InfiniteLoading
  },
  methods: {
    formatNotes(str){
      var len;
      if (document.body.offsetWidth <= 829 || window.screen.width <= 829) {
        len=50;
      }else{
        len=90;
      }
      str=str.replace(/<\s?.[^>]*>/gi,'');
      let returnStr=str.substr(0,len);
      if(returnStr.length!=str.length){
        returnStr+='……'
      }
      return returnStr;
    },
    onInfinite() {
      setTimeout(() => {
        this.PageIndex++;
        this.getNews_mobile();
      }, 100);
    },
    openSearchBox(){
      this.showSearch = true
    },
    closeSearchBox(){
      this.showSearch = false
    },
    active(index) {
      this.num = index
      if (index == 1) {
        var resultIndex = this.sumSerachData("Style");
        if (resultIndex >= 0) {
          this.requestData.Filter.splice(resultIndex, 1);
        }
        this.getNews(1);
      }
      if (index == 2) {
        var resultIndex = this.sumSerachData("Style");
        if (resultIndex >= 0) {
          this.requestData.Filter[resultIndex].FieldValue = "2";
        } else {
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "Style",
            "FieldValue": "2",
            "SqlOperator": 4,
            "IsQuery": true
          })
        }
        this.getNews(1);
      }
      if (index == 3) {
        var resultIndex = this.sumSerachData("Style");
        if (resultIndex >= 0) {
          this.requestData.Filter[resultIndex].FieldValue = "1";
        } else {
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "Style",
            "FieldValue": "1",
            "SqlOperator": 4,
            "IsQuery": true
          })
        }
        this.getNews(1);
      }
      if (index == 4) {
        var resultIndex = this.sumSerachData("Style");
        if (resultIndex >= 0) {
          this.requestData.Filter[resultIndex].FieldValue = "3";
        } else {
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "Style",
            "FieldValue": "3",
            "SqlOperator": 4,
            "IsQuery": true
          })
        }
        this.getNews(1);
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.getNews(val)
    },
    goActive(contentId) {
      this.$router.push({ path: '/indexWorkDynamicst', query: { contentId: contentId } })
    },

    getNews(PageIndex) {
      this.requestData.PageIndex = PageIndex;
      this.requestData.PageSize = this.PageSize;
      this.$service('/api/CMSMain/GetContentList', 'post', this.requestData).then((response) => {
        if (!response.Data) {
          this.newsList = [];
          this.PageTotal = 0;
          return;
        }
        this.newsList = response.Data.Items;
        this.PageTotal = response.Data.TotalItemCount;
      })
    },
    //mobile
    getNews_mobile() {
      this.requestData.PageIndex = this.PageIndex;
      this.requestData.PageSize = this.PageSize;
      this.$service('/api/CMSMain/GetContentList', 'post', this.requestData).then((response) => {
        if (!response.Data) {
          this.PageTotal = 0;
//          移动端分页没数据后clear
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
          let infinite = document.getElementsByClassName('infinite-status-prompt')
          infinite[0].innerHTML='无更多数据'
          infinite[1].innerHTML='无更多数据'
          return;
        }
        for (var  i =0;i<response.Data.Items.length;i++){
          this.newsList.push( response.Data.Items[i])
        }
        this.PageTotal = response.Data.TotalItemCount;
//        继续加载 loaded
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
      }).catch((err)=>{
//        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
      })
    },
//    时间轴
    getNext(arr, key) {
      if (arr[key + 1]) return arr[key + 1];
      return {}
    },
    sumSerachData(name) {
      for (var i = 0; i < this.requestData.Filter.length; i++) {
        var item = this.requestData.Filter[i];
        if (item.FieldName == name) {
          return i
        }
      }
      return -1;
    },
    // 获取最近一年的时间点
    getTimeLineList() {
      this.$service('/api/CMSMain/GetContentLists', 'post', {
        "Filter": [{
          "GroupName": "1",
          "FieldName": "PlatformType",
          "FieldValue": 0,
          "SqlOperator": 3,
          "IsQuery": true
        },
        {
          "GroupName": "2",
          "FieldName": "categoryType",
          "FieldValue": "News",
          "SqlOperator": 3,
          "IsQuery": true
        },
        {
          "GroupName": "3",
          "FieldName": "IsOriginal",
          "FieldValue": true,
          "SqlOperator": 3,
          "IsQuery": true
        }
        ]
      }).then((response) => {
        if (!response.Data) {
          return;
        }
        let nowTime = new Date().getTime();
        let nowDate = this.$bw.format(nowTime);
        var mouth = nowDate.m + 1;
        var year = nowDate.y;
        this.timeLineList.push({ time: year + '-' + (mouth >= 10 ? mouth : '0' + mouth), data: [] });
        for (var i = 0; i <= 12; i++) {
          mouth--;
          if (mouth <= 0) {
            mouth = 12;
            year--;
          }
          mouth = (mouth >= 10 ? mouth : '0' + mouth);
          let obj = { time: year + '-' + mouth, data: [] }
          if (response.Data.length > 0) {
            for (var k = 0; k < response.Data.length; k++) {
              var items = response.Data[k];
              var dateTimenew = this.$bw.format(items.postTime);
              //console.log(dateTimenew.m, mouth, dateTimenew.y, year, items.isOriginal);
              if (dateTimenew.m == mouth && dateTimenew.y == year && items.isOriginal) {
                obj.data.push({
                  title: items.title,
                  id: items.contentId
                })
              }
            }
          }

          // if (i % 3 == 0) {

          // }
          this.timeLineList.push(obj);
        }
        //console.info(this.timeLineList)
      });
    },
    searchFun() {
      var resultIndex = this.sumSerachData("title");
      if (resultIndex >= 0) {
        if (this.searchData == '') {
          this.requestData.Filter.splice(resultIndex, 1);
        } else { this.requestData.Filter[resultIndex].FieldValue = this.searchData; }

      } else {
        this.requestData.Filter.push({
          "GroupName": "xx",
          "FieldName": "title",
          "FieldValue": this.searchData,
          "SqlOperator": 0,
          "IsQuery": true
        })
      }
      this.PageIndex=1
      this.getNews()
    }
  },
  mounted() {
    //this.PageIndex=1
    //this.getNews()
    this.getTimeLineList();

    if (document.body.offsetWidth <= 829 || window.screen.width <= 829) {
      //首次会加载移动端的数据
    }else {
      if(this.$route.query.id){
        this.active(this.$route.query.id)
      }else{
        this.getNews(1)
      }
      
    }
  },
}

</script>
